<template>
    <div style="position:relative;width:100%;height:700px;">
        <div style="height:50px;width:400px;position:absolute;left:0;top:0;z-index:199;">
            <el-select v-model="companyList" style="width:100px;" placeholder="企业列表" @change="companySelected">
                <el-option v-for="item in companyListTo" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div style="height:50px;width:400px;position:absolute;right:0;top:0;z-index:199;">
            <el-row>
                <el-button type="info" plain @click="getDayData" >日</el-button>
                <el-button type="info" plain @click="getMonthData">月</el-button>
                <el-button type="info" plain @click="getYearData">年</el-button>
            </el-row> 
        </div>
        <div style="width:100%;height:20px;">
            <h3>企业流量数据图</h3>
        </div>
       <div id="echartsRigthBottom" style="width:100%;height:260px;padding-left:20px;">

        </div>

        <!-- <lineGraphic :searcherId="companyId" :searcherType="companyType" :graphicTitle="comoanyName" :graphicWidth="graphicWidth" :graphicHeight="graphicHeight"></lineGraphic>-->
        <pieGraphic :industryId="companyId" :graphicDataType="graphicDataType"  :graphicTitle="comoanyName" :graphicWidth="graphicWidth" :graphicHeight="graphicHeight"></pieGraphic>
        
    </div>
</template>

<script>
import{
  getStatisticsData
} from '@/api/bus/sensor/sensorData'

import TemplateLineGraphic from '../../report/templateLineGraphic'
import TemplatePieGraphic from '../../report/templatePieGraphic'
export default {
    components:{
        'lineGraphic':TemplateLineGraphic,
        'pieGraphic':TemplatePieGraphic,
    },
    data(){
        return{
            dialogFormVisible:false,
            form:{},
            options:[{
                value: '0.55',
                label: '55%'
                }, {
                value: '0.60',
                label: '60%'
                },
            ],
            companyId:'',
            startTime:'',
            endTime:'',
            companyType:'company',
            comoanyName:'企业传感器流量占比',
            graphicWidth:1180,
            graphicHeight:400,
            graphicDataType:3,
            myChart:{},
            datas:[], //线图数据集合
            datasPie:[],//饼图数据集合
            oneDayData:[],
            oneMonthData:[],
            oneYearData:[],
            options:{
                //  title: {
              //       text: '省流量数据'
              //   },
                // legend:{
                //   data:['压力传感数据','热力传感数据'],
                // },
                tooltip: {
                    trigger  : 'axis',
                    formatter: function (params) {
                     
                     
                    },
                    axisPointer: {
                        animation: false,
                        type     : 'none',
                    },
                    extraCssText: 'width:220px; white-space:pre-wrap'
                },
                //解决Y轴显示不全的情况
                grid: {
                    left: 100
                },
                xAxis: {
                    type     : 'category',
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type       : 'value',
                    boundaryGap: [0, '100%'],
                    splitLine  : {
                        show: false
                    },
                    

                },
                series: [
                {
                    name     : '流量传感数据',
                    type     : 'line',
                    itemStyle: {
                      normal : {
                        lineStyle:{
                          color: 'red'
                        }
                      }
                    },
                    showSymbol    : false,
                    hoverAnimation: false,
                    data          : []
                }
                ]
            }
        }
    },
    created() {
        this.companyId = this.$route.query.companyId;
        if( this.companyId ===undefined)
        {
            this.companyId ='1';
        }
    },
    mounted() {
        this.drawBottom();
        // this.drawPie();
        
        
    },
    methods: {
        //获取园区日累计数据，按小时展现
        getDayData(){
            this.datas=[];
            var vt = this.getNowFormatDate(0,0,0);
            var vtOneDayBefore = this.getNowFormatDate(1,0,0);
            this.oneDayData=[];
            getStatisticsData(this.companyId,'COMPANY','DAY',vtOneDayBefore,vt).then(response=>{
                console.log(response);
                for (let index = 0; index < response.data.length; index++) {
                var vt = response.data[index];
                
                this.oneDayData.push({
                    name : vt.timePoint.substring(11),
                    value: [vt.timePoint.substring(11),vt.data]
                    })
            }
                this.myChart.setOption(this.options);
                this.myChart.setOption({
                    
                    series:[{
                        name     : '流量传感数据',
                        type     : 'line',
                        data : this.oneDayData
                    }]
                });
            });
            
        },
        //获取园区月累计数据，按日展现
        getMonthData(){
            this.datas=[];
            var vt = this.getNowFormatDate(0,0,0);
            var vtOneDayBefore = this.getNowFormatDate(0,1,0);
            this.oneMonthData=[];
            getStatisticsData(this.companyId,'COMPANY','MONTH',vtOneDayBefore,vt).then(response=>{
                console.log(response);
                for (let index = 0; index < response.data.length; index++) {
                    var vt = response.data[index];
                    
                    this.oneMonthData.push({
                        name : vt.timePoint.substring(0,10),
                        value: [vt.timePoint.substring(0,10),vt.data]
                    })
                }
                this.myChart.setOption(this.options);
                this.myChart.setOption({
                   
                    series:[{
                         name     : '流量传感数据',
                        type     : 'line',
                        data : this.oneMonthData
                    }]
                })
            })
        },
        //获取园区年累计数据，按月展现
        getYearData(){
            this.datas=[];
            var vt = this.getNowFormatDate(0,0,0);
            var vtOneDayBefore = this.getNowFormatDate(0,0,1);
            this.oneYearData=[];
            getStatisticsData(this.companyId,'INDUSTRY','YEAR',vtOneDayBefore,vt).then(response=>{
               console.log(response);
                for (let index = 0; index < response.data.length; index++) {
                    var vt = response.data[index];
                    
                    this.oneYearData.push({
                        name : vt.timePoint.substring(11),
                        value: [vt.timePoint.substring(11),vt.data]
                    })
                }
                this.myChart.setOption(this.options);
                this.myChart.setOption({
                  
                    series:[{
                         name     : '流量传感数据',
                        type     : 'line',
                        data : this.oneMonthData
                    }]
                })
            })
        },
       
        drawBottom(){
            this.myChart= this.$echarts.init(document.getElementById('echartsRigthBottom'));
            this.myChart.setOption(
              this.options
             );
             setTimeout(() => {
                this.getDayData();
             }, 100);
            //  setTimeout(() => {
            //      this.getCompanyDayData();
            //  }, 100);
          },

          getNowFormatDate(ifOneDay,ifOneMonth,ifOneYear){
            var timestamp = Date.parse(new Date());
            var subOneHour = ifOneDay*24*60*60*1000;
            var subOneDay = ifOneMonth*30*24*60*60*1000;
            var subOneYear = ifOneYear*365*60*60*1000;

            timestamp=timestamp-subOneYear-subOneHour-subOneDay;
            var unixtimestamp = new Date(parseInt(timestamp));
            var year = 1900 + (unixtimestamp.getYear());
            var month = "0" + (unixtimestamp.getMonth()+1);
            var date = "0" + (unixtimestamp.getDate());
            var hour = "0" + (unixtimestamp.getHours());
            var minute = "0" + unixtimestamp.getMinutes();
            var second = "0" + unixtimestamp.getSeconds();
            return year + "-" + month.substring(month.length-2, month.length)  + "-" + date.substring(date.length-2, date.length)
                + " " + hour.substring(hour.length-2, hour.length) + ":"
                + minute.substring(minute.length-2, minute.length) + ":"
                + second.substring(second.length-2, second.length);
      },
          
    }
}

</script>

<style>

</style>
